<template>
  <div>
    <div v-show="tableShow" ref="template">
      <slot :getChineseNumber="getChineseNumber">
        <span>编写你自己的打印区域组件，然后slot插入到vue-easy-print</span>
      </slot>
    </div>
    <!-- 这里按钮偷了个懒，直接拿了element-ui的css name来用。 -->
    <button v-if="buttonShow" @click="print" type="button" :class="buttonClass">
      <span>开始打印</span>
    </button>
  </div>
</template>

<script>
  export default {
    name: "FlymePrint",
    components: {},
    props: {
      // 针对分页表格模式：末尾空白行插入
      spaceRow: {
        type: Boolean,
        default: false
      },

      // 针对分页表格模式：传入的打印数据。
      tableData: {
        type: Object,
        default() {
          return undefined;
        }
      },
      // 是否显示表格
      tableShow: {
        type: Boolean,
        default: false
      },
      // 是否显示默认的打印按钮
      buttonShow: {
        type: Boolean,
        default: false
      },
      buttonClass: {
        type: String,
        default: "el-button el-button--default"
      },
      // 每页多少行
      onePageRow: {
        type: Number,
        default: 7
      },

      beforeCopy: Function,
      beforePrint: Function
    },
    data() {
      return {
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let printI = document.getElementById("easyPrintIframe");
        if (!printI) {
          printI = document.createElement("iframe");
          printI.id = "easyPrintIframe";
          printI.style.position = 'fixed'
          printI.style.width = '0'
          printI.style.height = '0'
          printI.style.top = '-100px'

          // 兼容ie
          if (
            window.location.hostname !== document.domain &&
            navigator.userAgent.match(/msie/i)
          ) {

            printI.src =
              'javascript:document.write("<head><script>document.domain=\\"' +
              document.domain +
              '\\";</s' +
              'cript></head><body></body>")';

          }
          printI.onload = () => {
            this.getStyle();
          }

          document.body.appendChild(printI);
        }else{
          this.getStyle();
        }
      },
      print() {
        if (typeof this.beforeCopy === "function") {
          // 检测到有复制前需要执行的功能
          this.beforeCopy();
        }

        let $iframe = document.getElementById("easyPrintIframe");
        // 复制body，打印内容
        $iframe.contentDocument.body.innerHTML = this.$refs.template.innerHTML;

        if (typeof this.beforePrint === "function") {
          // 检测到有打印前需要执行的功能
          // 比如有些二维码组件无法直接复制dom完成。
          this.beforePrint();
        }

        setTimeout(() => {
          $iframe.contentWindow.print();
        }, 100);

      },
      getStyle() {
        let printI = document.getElementById("easyPrintIframe");
        var str = "",
          styles1 = document.querySelectorAll("style");
        for (var i = 0; i < styles1.length; i++) {
          str += styles1[i].outerHTML;
        }

        printI.contentDocument.head.innerHTML = str;
        // 添加link引入
        let styles = document.querySelectorAll("link");
        for (let i = 0; i < styles.length; i++) {
          // chrome 正常，firefox不正常，能执行到，但是添加没结果
          let link = document.createElement("link");
          link.setAttribute("rel", "stylesheet");
          if(styles[i].type) link.setAttribute("type", styles[i].type);
          else link.setAttribute("type", 'text/css');
          link.setAttribute("href", styles[i].href);
          link.setAttribute('media','all');
          printI.contentDocument.head.appendChild(link);
        }

      },
      getChineseNumber(currencyDigits) {
        // 转换数字到中文大写，请用prop传递给模版组件，这个函数在网上扣的。
        var MAXIMUM_NUMBER = 99999999999.99;
        // Predefine the radix characters and currency symbols for output:
        var CN_ZERO = "零";
        var CN_ONE = "壹";
        var CN_TWO = "贰";
        var CN_THREE = "叁";
        var CN_FOUR = "肆";
        var CN_FIVE = "伍";
        var CN_SIX = "陆";
        var CN_SEVEN = "柒";
        var CN_EIGHT = "捌";
        var CN_NINE = "玖";
        var CN_TEN = "拾";
        var CN_HUNDRED = "佰";
        var CN_THOUSAND = "仟";
        var CN_TEN_THOUSAND = "万";
        var CN_HUNDRED_MILLION = "亿";
        var CN_SYMBOL = ""; // 可以设置前缀 比如 人民币
        var CN_DOLLAR = "元";
        var CN_TEN_CENT = "角";
        var CN_CENT = "分";
        var CN_INTEGER = "整";

        // Variables:
        var integral; // Represent integral part of digit number.
        var decimal; // Represent decimal part of digit number.
        var outputCharacters; // The output result.
        var parts;
        var digits, radices, bigRadices, decimals;
        var zeroCount;
        var i, p, d;
        var quotient, modulus;

        // Validate input string:
        if (currencyDigits === undefined) {
          return "";
        }
        currencyDigits = currencyDigits.toString();
        if (currencyDigits == "") {
          // alert("Empty input!");
          return "";
        }
        if (currencyDigits.match(/[^,.\d]/) != null) {
          // alert("Invalid characters in the input string!");
          return "";
        }
        if (currencyDigits.match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
          // alert("Illegal format of digit number!");
          return "";
        }
       
        // Normalize the format of input digits:
        currencyDigits = currencyDigits.replace(/,/g, ""); // Remove comma delimiters.
        currencyDigits = currencyDigits.replace(/^0+/, ""); // Trim zeros at the beginning.
        // Assert the number is not greater than the maximum number.
        if (Number(currencyDigits) > MAXIMUM_NUMBER) {
          alert("您输入的金额太大，请重新输入!");
          return "";
        }

        // Process the coversion from currency digits to characters:
        // Separate integral and decimal parts before processing coversion:
        parts = currencyDigits.split(".");
        if (parts.length > 1) {
          integral = parts[0];
          decimal = parts[1];
          // Cut down redundant decimal digits that are after the second.
          decimal = decimal.substr(0, 2);
        } else {
          integral = parts[0];
          decimal = "";
        }
        // Prepare the characters corresponding to the digits:
        digits = new Array(
          CN_ZERO,
          CN_ONE,
          CN_TWO,
          CN_THREE,
          CN_FOUR,
          CN_FIVE,
          CN_SIX,
          CN_SEVEN,
          CN_EIGHT,
          CN_NINE
        );
        radices = new Array("", CN_TEN, CN_HUNDRED, CN_THOUSAND);
        bigRadices = new Array("", CN_TEN_THOUSAND, CN_HUNDRED_MILLION);
        decimals = new Array(CN_TEN_CENT, CN_CENT);
        // Start processing:
        outputCharacters = "";
        // Process integral part if it is larger than 0:
        if (Number(integral) > 0) {
          zeroCount = 0;
          for (i = 0; i < integral.length; i++) {
            p = integral.length - i - 1;
            d = integral.substr(i, 1);
            quotient = p / 4;
            modulus = p % 4;
            if (d == "0") {
              zeroCount++;
            } else {
              if (zeroCount > 0) {
                outputCharacters += digits[0];
              }
              zeroCount = 0;
              outputCharacters +=
                digits[Number(d)] + radices[modulus];
            }
            if (modulus == 0 && zeroCount < 4) {
              outputCharacters += bigRadices[quotient];
            }
          }
          outputCharacters += CN_DOLLAR;
        }
        // Process decimal part if there is:
        if (decimal != "") {
          for (i = 0; i < decimal.length; i++) {
            d = decimal.substr(i, 1);
            if (d != "0") {
              outputCharacters += digits[Number(d)] + decimals[i];
            }
          }
        }
        // Confirm and return the final output string:
        if (outputCharacters == "") {
          outputCharacters = CN_ZERO + CN_DOLLAR;
        }
        if (decimal == "") {
          outputCharacters += CN_INTEGER;
        }
        outputCharacters = CN_SYMBOL + outputCharacters;
        return outputCharacters;
      }
    }
  };
</script>
<style>
@media print
{
  table {page-break-after:avoid;}
}
</style>
